<template>
  <div class="crash-report1">
    <el-form :inline="true" v-model="selectForm">
      <el-form-item label="年份">
        <el-date-picker v-model="selectForm.year" type="year" placeholder="选择年" align="right" size="small"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" :loading="false" @click="getPageData(true)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <div id="error-report" style="width: 100%; height:350px;" v-loading="errorLoading"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import moment from 'moment'

  export default {
    data () {
      return {
        errorLoading: false,
        chartsInstance: {
          error: ''
        },
        xData: [],
        androidData: [],
        iosData: [],
        // h5Data: [],
        selectForm: {
          year: moment().format('YYYY'),
          month: ''
        }
      }
    },
    activated () {
      this.getPageData(true)
    },
    methods: {
      getPageData (bool) {
        // /codes/monthlist?year=2016 查询2016年的数据
        // /codes/monthlist?year=2016&tag=1 查询2017年的数据
        // /codes/monthlist?year=2016&tag=-1  获取2015年的数据
        // /codes/daylist?date=2018-07 获取2018年7月份的数据
        // /codes/monthlist 获取今年的数据
        var vm = this
        var url = ''
        vm.errorLoading = true

        if (bool === true) {
          if (vm.selectForm.year !== '' && vm.selectForm.year !== null) {
            url = '/codes/monthlist?year=' + moment(vm.selectForm.year).format('YYYY')
          } else {
            url = '/codes/monthlist'
          }
        } else {
          if (vm.selectForm.month !== null && vm.selectForm.month !== '') {
            url = '/codes/daylist?date=' + vm.selectForm.month
          }
        }
        // console.log(url)

        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            // vm.selectForm.month = ''
            var xData = data.data
            vm.xData = []
            vm.iosData = []
            vm.androidData = []
            // vm.h5Data = []
            for (let i in xData) {
              vm.xData.push(i)
              for (let j in xData[i]) {
                if (j === 'IOS') {
                  vm.iosData.push((xData[i][j] * 100).toFixed(2))
                } else if (j === 'Android') {
                  vm.androidData.push((xData[i][j] * 100).toFixed(2))
                } else {
                  // vm.h5Data.push((xData[i][j] * 100).toFixed(2))
                }
              }
            }
            vm.initEcharts()
          }
        })
      },
      initEcharts () {
        var vm = this
        echarts.dispose(vm.chartsInstance.error)
        vm.chartsInstance.error = echarts.init(document.getElementById('error-report'))
        vm.getErrorReport()
        window.addEventListener('resize', () => {
          vm.chartsInstance.error.resize()
        })
      },
      getErrorReport () {
        var vm = this
        let isShow = (vm.androidData.length === 0 && vm.iosData.length === 0)

        var option = {
          title: [{
            text: '应用HTTP错误率'
          }, {
            show: isShow,
            text: '暂无数据',
            top: '42%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          }],
          tooltip: {
            trigger: 'axis',
            // formatter: '{b}<br/>{a0}: {c0}%<br />{a1}: {c1}%'
            formatter: function (params) {
              var result = ''
              params.forEach(function (item) {
                result += item.marker + ' ' + item.seriesName + ': ' + item.value + '%<br/>'
              })
              return result
            }
          },
          legend: {
            data: ['Android', 'IOS']
          },
          // color: ['#69AD4A', '#0C81C6'],
          color: ['#3c8dbc', '#00a65a'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisTick: {
              inside: true,
              lineStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#333'
            },
            data: vm.xData
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#333',
              formatter: function (value) {
                return value.toFixed(2) + '%'
              }
            }
          },
          series: [
            {
              name: 'Android',
              type: 'line',
              symbol: 'circle',
              symbolSize: 6,
              data: vm.androidData,
              label: {
                normal: {
                  show: true,
                  padding: [5, 8],
                  color: '#fff',
                  // backgroundColor: '#69AD4A',
                  backgroundColor: '#3c8dbc',
                  formatter: '{c}%'
                }
              }
            },
            {
              name: 'IOS',
              type: 'line',
              symbol: 'circle',
              symbolSize: 6,
              data: vm.iosData,
              label: {
                normal: {
                  show: true,
                  padding: [5, 8],
                  color: '#fff',
                  // backgroundColor: '#0C81C6',
                  backgroundColor: '#00a65a',
                  formatter: '{c}%'
                }
              }
            }
          ]
        }
        vm.chartsInstance.error.setOption(option)
        vm.errorLoading = false

        vm.chartsInstance.error.on('click', function (param) {
          if (param.name.split('-').length === 2) {
            vm.selectForm.month = param.name
            vm.getPageData(false)
          }
        })
      }
    }
  }
</script>
<style scoped>
.el-form{
  text-align: right;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.el-button{
  padding: 8px 15px;
  font-size: 14px;
}
.el-row{
  margin-bottom: 20px;
}
</style>

